<template>
  <!-- 导航 -->
  <div v-show="navbar.opened" class="container-layer-navbar">
    <div v-for="(temp,index) in navList" :key="index" @click="go(temp)">
      <img width="27" height="41" :src="`./static_image/${toogelIcon(temp)}.png`">
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      nowPage: '',
      navList: ['home', 'dynamic', 'my']
    }
  },
  computed: {
    ...mapGetters([
      'navbar'
    ])
  },
  watch: {
    $route(to, from) {
      this.nowPage = to.name
    }
  },
  methods: {
    go(herf) {
      this.$router.push('/' + herf)
    },
    toogelIcon(name) {
      const icon = name === this.nowPage ? `${name}-select` : name
      return icon
    }
  }
}
</script>

<style lang="less">
.container-layer-navbar {
  width: 100%;
  height: 55px;
  position: fixed;
  bottom: 0;
  display: flex;
  z-index: 2001;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #ddd;
  background: #f9f9f9;
  div {
    width: 100%;
    text-align: center;
  }
}
</style>
